import React from 'react';
import { Row, Col, Form, Input, Button, Modal, Spin, DatePicker } from 'antd';

import { WhseSelect } from '@/components/FormItemSelect';
const FormItem = Form.Item;
const formLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

export default class MrpUpdate extends React.Component<any, any> {
  handleSubmit = (values: any) => {
    const { onSubmit } = this.props;
    if (typeof onSubmit === 'function') {
      onSubmit(values);
    }
  };
  formRender = () => {
    const { formVals = {} } = this.props;
    console.log(formVals);
    
    return (
      <Form {...formLayout} initialValues={formVals} onFinish={this.handleSubmit}>
        <Row gutter={0}>
          <Col span={12}>
            <FormItem name="contractNum" label="合同号">
              <Input placeholder="请输入合同号" />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="orderNum" label="订单号">
              <Input placeholder="请输入订单号" />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="productId" label="产品编码">
              <Input placeholder="请输入产品编码" />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="needNum" label="需求量">
              <Input placeholder="请输入需求量" />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="stockNum" label="需求日期">
              <DatePicker/>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="location" label="现存量">
              <Input placeholder="请输入现存量" />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="supplier" label="库位">
               <WhseSelect
                          width={220}
                          name={['ResourceGroup', 'supplier']}
                          placeholder="仓库"
                        />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="purchaseOrder" label="采购单">
              <Input placeholder="请输入采购单" />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="qualityOrder" label="质检单">
              <Input placeholder="请输入质检单" />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="unquality" label="不合格数">
              <Input placeholder="请输入不合格数" />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="quality" label="合格数量">
              <Input placeholder="请输入合格数量" />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="qitao" label="是否齐套">
              <Input placeholder="请输入是否齐套" />
            </FormItem>
                </Col>
                <Col span={12} style={{ display: 'flex', justifyContent: 'flex-end', paddingRight: 62 }}>
            <Button type="primary" htmlType="submit">
              确认
            </Button>
          </Col>
        </Row>
      </Form>
    );
  };
  render() {
    const { visible, editStatus, onCancel, loading = false } = this.props;
    const FormRender = this.formRender;
    return (
      <Modal
        title={editStatus ? '编辑计划单' : '创建计划单'}
        width="810px"
        bodyStyle={{ padding: 24 }}
        visible={visible}
        destroyOnClose
        footer={null}
        onCancel={() => onCancel()}
      >
        <Spin spinning={loading}>
          <FormRender />
        </Spin>
      </Modal>
    );
  }
}
